<template>
  <el-timeline>
    <el-timeline>
      <el-timeline-item
        v-for="(treatment, index) in seeRecord"
        :key="index"
        placement="top"
        type="primary"
        :timestamp="
          treatment.onClinicTime
            ? treatment.onClinicTime
            : treatment.reservationDate
        "
      >
        <el-card class="card__container" shadow="hover">
          <ul class="card__content-list">
            <li class="card__content-item">
              <span class="card__content-item-label">现场TC:</span>
              <span>{{ treatment.tcName }}</span>
            </li>
            <li class="card__content-item">
              <span class="card__content-item-label">详情:</span>
              <span>{{ treatment.doctorName }}</span>
            </li>
          </ul>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-timeline>
</template>

<script>
import { listAppointment } from '@/api/services/appointment'
export default {
  name: 'SeeingRecord',
  props: {
    patient: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      seeRecord: [],
    }
  },
  mounted() {
    setTimeout(() => {
      this.getListAppointment()
    }, 300)
  },
  methods: {
    async getListAppointment() {
      const datas = await listAppointment({ clinicPersonId: this.patient.id })
      this.seeRecord = datas.rows.reverse()
    },
  },
}
</script>

<style lang="scss" scoped>
.card__container {
  width: 500px;
  position: relative;

  .card__content-list {
    padding-left: 0;

    .card__content-item {
      padding-left: 0;
      display: flex;

      .card__content-item-label {
        min-width: 60px;
        display: inline-block;
      }
    }

    .card__content-item:first-child {
      margin-bottom: 5px;
    }
  }
}
</style>
